<template>
  <div class="index-box">
    <el-row :gutter="20">
      <el-col :span="19">
        <div class="grid-content bg-purple">
          <div class="flex">
            <subtit title="数据展示"></subtit>
            <span class="shu-tip">数据更新于2025-07-08 00:00:00</span>
            <div class="shu-refresh">
              <span class="font14">刷新</span>
              <span class="el-icon-refresh-right"></span>
            </div>
          </div>
          <el-form :model="queryParams" ref="queryForm" :inline="true" class="zdy-form search-form-new"
            label-width="68px" @keyup.enter.native="search">
            <el-form-item label="团队筛选" prop="tenantId">
              <el-select v-model="queryParams.tenantId" placeholder="请选择团队" clearable filterable>
                <el-option v-for="dict in tenantList" :key="dict.tenantId" :label="dict.tenantName"
                  :value="dict.tenantId" />
              </el-select>
            </el-form-item>

            <el-form-item label="游戏类型" prop="tenantId">
               <el-select v-model="queryParams.type" placeholder="请选择游戏类型">
            <el-option v-for="dict in type" :key="dict.value" :label="dict.name" :value="dict.value" />
          </el-select>
            </el-form-item>
            <el-form-item label="时间" prop="" label-width="40px">
              <el-date-picker style="width: 300px" v-model="timer" type="daterange" align="right" unlink-panels
                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
                @change="search">
              </el-date-picker>
            </el-form-item>
            <el-radio-group v-model="queryParams.startType">
              <el-radio-button :label="2">月</el-radio-button>

              <el-radio-button :label="1">日</el-radio-button>
              <el-radio-button :label="2">周</el-radio-button>
            </el-radio-group>
          </el-form>
          <div class="customTab">
            <el-tabs type="border-card" v-model="actived" @tab-click="tabChange" v-loading="loading">
              <el-tab-pane v-for="(itme, index) in tabList" :label="itme.name" :name="itme.value">
                <div class="flex tabs-box">
                  <div class="flex">
                    <div class="tabs-img"><img src="../../assets/img/home/shuju-1.png" alt="商品数量"></div>
                    <div class="tabs-text">
                      <div>商品数量</div>
                      <div class="tabs-num">8888</div>
                    </div>
                  </div>
                  <div class="flex">
                    <div class="tabs-img"><img src="../../assets/img/home/shuju-2.png" alt="销售总价"></div>
                    <div class="tabs-text">
                      <div>销售总价</div>
                      <div class="tabs-num">8888</div>
                    </div>
                  </div>
                  <div class="flex">
                    <div class="tabs-img"><img src="../../assets/img/home/shuju-3.png" alt="回收成本"></div>
                    <div class="tabs-text">
                      <div>回收成本</div>
                      <div class="tabs-num">8888</div>
                    </div>
                  </div>
                  <div class="flex">
                    <div class="tabs-img"><img src="../../assets/img/home/shuju-4.png" alt="预估利润"></div>
                    <div class="tabs-text">
                      <div>预估利润</div>
                      <div class="tabs-num">8888</div>
                    </div>
                  </div>
                  <div class="flex">
                    <div class="tabs-img"><img src="../../assets/img/home/shuju-5.png" alt="平均利润"></div>
                    <div class="tabs-text">
                      <div>平均利润</div>
                      <div class="tabs-num">8888</div>
                    </div>
                  </div>

                  <div class="flex">
                    <div class="tabs-img"><img src="../../assets/img/home/shuju-6.png" alt="毛利率"></div>
                    <div class="tabs-text">
                      <div>毛利率</div>
                      <div class="tabs-num">8888</div>
                    </div>
                  </div>
                </div>

                <div class="app-container table_box" v-loading="loading">
                  <el-table align="center" :data="records" height="200px">
                    <el-table-column label="商品数量" prop="gameName" />
                    <el-table-column label="销售价格" prop="gameName" />
                    <el-table-column label="回收成本" prop="gameName" />
                    <el-table-column label="预估利润" prop="gameName" />
                    <el-table-column label="平均利润" prop="gameName" />
                    <el-table-column label="毛利率" prop="gameName" />
                  </el-table>
                  <div class="page-footer">
                    <el-pagination background layout="prev, pager, next" :total="total">
                    </el-pagination>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>


        </div>
        <!-- 数据统计 -->
        <div class="tongji-box">
          <subtit title="数据统计"></subtit>
          <div class="flex shuju-box">
            <div class="shuju-item flex">
              <div class="shuju-img">
                <img src="../../assets/img/home/shuju-7.png" alt="">
              </div>
              <div class="shuju-txt">
                <div >在售总量:888</div>
                <div >已售总量:666</div>
              </div>
            </div>

             <div class="shuju-item flex shuju-item-2">
              <div class="shuju-img">
                <img src="../../assets/img/home/shuju-8.png" alt="">
              </div>
              <div class="shuju-txt shuju-txt-num">
                <div >在售总额:88888</div>
                <div >已售总额:6666</div>
              </div>
            </div>
          </div>

          <div class="echarts-box">
              <div class="echarts-item">
                <forSale></forSale>
              </div>
              <div class="echarts-item">
                <sold></sold>
              </div>
          </div>

          <!-- 每日发布 -->
           <div style="margin-top: 16px;">
            <columnar></columnar>
           </div>
        </div>
      </el-col>

      <!-- 右侧 -->
      <el-col :span="5">
        <div class="grid-content bg-purple">
             <subtit title="常见问题"></subtit>
             <div class="gard-box">
                <div>常见问题</div>
                 <div>常见问题</div>
                  <div>常见问题</div>
                   <div>常见问题</div>
             </div>
              <subtit title="演示视频"></subtit>
                <video autoplay loop muted playsinline>
          <source
            src="https://imgage.maimaihao.com/yuduhulian/erp/assets/ConsignmentFourzero/Scene.mp4"
            type="video/mp4"
          />
        </video>
        <div class="video-title">这是视频标题</div>
        </div>
      </el-col>
    </el-row>
  </div>


</template>

<script>
import subtit from "@/components/indexComponents/subtit.vue";
import forSale from './components/forSale.vue'
import sold from './components/sold.vue'
import columnar from './components/columnar.vue'

export default {
  components: {
    subtit,
    forSale,
    sold,
    columnar
  },
  data() {
    return {
      type: [{
          name: "手游",
          value: 0
        },
        {
          name: "端游",
          value: 1
        }], 
      loading: false,
      queryParams: {
        pageNum: 1,
      },
      timer: [],
      tenantList: [],
      actived: 'list',
      tabList: [
        {
          name: '近期发布',
          value: 'list'
        },
        {
          name: '在售商品',
          value: 'fabu'
        },
        {
          name: '交易中',
          value: 'fabu'
        },
        {
          name: '已售商品',
          value: 'fabu'
        },

      ],
      total: 0,
      records: []
    }
  },
  methods: {
    getList() {

    },
    tabChange(val) {

      this.actived = val.name
    },
    search() {

    }
  }
}


</script>
<style scoped lang="scss">
.grid-content {
  padding: 16px;
  background: #fff;
  border-radius: 10px;

  .flex {
    align-items: center;
  }



  .shu-tip {
    font-size: 12px;
    color: #666;
    margin-left: 8px;
  }

  .shu-refresh {
    color: #FA6400;
    font-size: 15px;
    margin-left: 8px;

    .font14 {
      font-size: 12px;
      margin-right: 4px;
    }
  }

  .zdy-form {
    margin-top: 22px;
  }

  .customTab {
    margin-top: 14px;

    .tabs-box {
      width: 88%;
      margin: 30px auto;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .table_box {
      padding: 0 !important;
    }

    ::v-deep .el-tabs--border-card>.el-tabs__content {
      padding: 0 !important;
    }

    .tabs-img {
      width: 48px;
      height: 48px;
      margin-right: 8px;

      img {
        width: 100%;
        height: 100%
      }
    }

    .tabs-text {
      color: #333;
      font-size: 15px;
      font-weight: 600;

      .tabs-num {
        margin-top: 4px;
        font-size: 22px;
      }
    }

    ::v-deep {
      .el-tabs--border-card {
        box-shadow: none;
        border: none;
      }

      .el-tabs__item {
        color: #666;
        font-weight: 500;
      }
    }

    ::v-deep .is-active {
      border-radius: 8px 8px 0px 0px;
      border: none;
    }
  }

  .app-container {
    border-radius: 0;
    min-height: auto;
  }

  .page-footer {
    margin-top: 12px;
    text-align: center;
  }

  .lines {
    color: #f6f6f6;
    height: 8px;
  }
}

.tongji-box {
  background-color: #fff;
  margin-top: 8px;
  padding: 16px;
  border-radius: 10px;
  .shuju-img {
    width: 48px;
    height: 48px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .shuju-box {
    justify-content: center;
    .shuju-item {
      width: 290px;
      height: 102px;
      background: #FFFFFF;
      border-radius: 8px;
      align-items: center;
      box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 0px;
      justify-content: center;
    }
    .shuju-item-2 {
      margin-left: 32px;
    }
    .shuju-txt {
      margin-left: 24px;
      font-size: 16px;
      color: #59AD00;
    }
    .shuju-txt-num {
    
      color: #FFAC00;
    }
  }
}
.echarts-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 2fr));
  gap: 10px;
  margin-top: 30px;
  .echarts-item {
    border-radius: 10px;
    padding: 16px;
     box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 0px;
  }
}
.gard-box {
display: grid;
grid-template-columns: repeat(2, 1fr);

grid-row-gap: 5px;
margin: 16px 0;
font-size: 16px;
color: #6C5DD3;
font-weight: 500;
}
video {
  margin-top: 8px;
  height: 150px;
  border-radius: 16px;
  width: 100%;
  object-fit: cover;
}
.video-title {
  margin-top: 6px;
}
.index-box {
  overflow: hidden;
  padding-bottom: 10px;
}
</style>